JS 获取编辑器中所有图片转换成Base64、File

这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

• 前端业务中需要快速处理数据、DOM、浏览器能力或通用工具函数时参考。
• 把散落在项目里的小技巧抽成可复用代码片段，减少重复实现。
• 排查兼容性和边界输入问题前，先用本文示例确认核心思路。

核心要点 ​

• 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
• 保留了 1 段可直接参考的代码或命令，主要涉及 javascript，复制前需要按当前项目路径、版本和变量名做调整。
• 文中保留了 1 个导出图片资源，适合和文字步骤一起对照查看。

const imgReg = /<img.*?(?:>|\/>)/gi;
const imgStr = code.match(imgReg)
if (imgStr && imgStr.length) {
    getImgUrl(imgStr, code)
}
// 图片转 Base64
function getImgBase64(url, filename, base64Callback) {
    const imgType = ['jpg', 'jpeg', 'png', 'bmp', 'gif']
    const img = new Image
          img.src = url
        //   img.crossOrigin = 'anonymous' // anonymous
          img.onload = function(){
            const { width, height } = img
            let canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
                        canvas.width = width
                        canvas.height = height
                    ctx.drawImage(img, 0, 0, width, height)
            const imgTypeStr = img.src.split('.').pop().toLowerCase()
            const ext = imgType.includes(imgTypeStr) ? imgTypeStr.toUpperCase() : 'JPG'
            console.log(ext)
            const base64 = canvas.toDataURL(`image/${ext}`)
            base64Callback(base64, filename)
            canvas = null
          }
}
// 获取图片地址
function getImgUrl(imgStr, code, host = '') {
    const hostStr = host || window.location.host
    console.log(hostStr)
    const imgSrc = []
    const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
    imgStr.forEach(i => {
        if (! i.includes(hostStr) && ! i.includes('data:image')) {
            imgSrc.push(i.match(srcReg))
        }
    })
    getImgBase64('https://hbimg.huabanimg.com/49d8b53f48fcaa8cc5694899a66d1051340b74c68b75e-hBqQmm_fw658/format/webp', 'lancema', getBase64Callback)
}
// Base64 转 File
function getBase64ToFile(base64, filename) {
    const arr = base64.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while(n--){
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
}
function getBase64Callback(base64, filename) {
    console.log(getBase64ToFile(base64, filename))
}

实践检查清单 ​

• 把示例函数放进业务前，先补齐空值、异常输入、异步失败和浏览器兼容性测试。
• 通用工具函数应尽量收敛到项目公共模块，避免多个页面复制出不同版本。
• 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。